<template>
  <main-layout v-bind:headerContent="title" class="helloworld">
    <flex-center class="search">
      <el-input
        placeholder="输入框在这里哦"
        v-model="input"
        class="input-with-select"
        @keyup.enter.native="go(input)"
      >
        <el-button
          id="search"
          slot="append"
          icon="el-icon-my-heart"
          @click="go(input)"
        ></el-button>
      </el-input>
    </flex-center>
  </main-layout>
</template>

<script>
import MainLayout from "../layout/Main.vue";
import FlexCenter from "../layout/FlexCenter.vue";
import Cookies from "js-cookie";
export default {
  components: {
    MainLayout,
    FlexCenter,
  },
  data() {
    return {
      input: "",
      title: "主页",
      issue: [
        {
          key: "MOSHIDIANMA",
          value: "code",
        },
        {
          key: "1", //"YUANYIZUOWONVPENGYOUMA",
          value: "profess",
        },
        {
          key: "LOVE",
          value: "contract",
        },
      ],
    };
  },
  methods: {
    go(anser) {
      var mesg = this.getPathByAnser(anser);
      if (mesg) this.errorTip(mesg);
    },
    getPathByAnser(anser) {
      let token = Cookies.get("token");
      token = token ? -1 : parseInt(token);
      for (const key in this.issue) {
        let notPassPrePage = token + 1 < key;
        let keyItem = this.issue[key];
        if (keyItem.key === anser) {
          if (notPassPrePage) {
            return "有点意外，你是猜的吧";
          }
          if (key > token) {
            Cookies.set("token", key);
          }
          this.$router.push(keyItem.value);
          return "";
        }
      }
      return "不对哦再猜猜看";
    },
    errorTip(text) {
      this.$message({
        showClose: true,
        message: text,
        type: "error",
      });
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
.helloworld {
  background: #e7fae7 url("../assets/win4000.jpg") repeat fixed center;
}
.el-icon-my-heart {
  background: url("../assets/heart.png") center no-repeat;
  background-size: cover;
}
.el-icon-my-heart:before {
  content: "\8d3a";
  font-size: 20px;
  visibility: hidden;
}
.search {
  padding-bottom: 200px;
}
#search:active {
  background-color: rgb(255, 163, 182);
}
</style>
